<template>
  <div class="content">
    <form>
      <div class="phone textbox">
        <p>手机号</p>
        <input type="text" name="username" class="input" id="phone">
      </div>
      <div class="pass textbox">
        <p>请输入密码</p>
        <input type="password" name="password" class="input" id="password">
        <!--<span id="passMsg" class="mess">密码长度不足六位</span>-->
      </div>
      <input type="button" value="登录" class="btn-login" @click="login()">
    </form>
    <div class="register" @click="click()">注册新用户</div>
    <div class="rapidtext">快捷登录</div>
    <ul class="rapid">
      <li><i class="iconfont icon-weixin"></i>微信</li>
      <li><i class="iconfont icon-icon_qq"></i>QQ</li>
      <li><i class="iconfont icon-sina"></i>新浪</li>
    </ul>
    <div class="information" id="information"></div>
  </div>
</template>
<script type="text/ecmascript-6">
  //  import {addCookie,getCookie} from "../../assets/js/cookieTools";
  export default {
    mounted(){
      $(".information").css({
        left: ($(".content").width() - $(".information").outerWidth())/2,
        top: ($(".content").height() - $(".information").outerHeight())/2
      });
      $(".textbox").click(function () {
        $(this).children("p").animate({
          top:"-0.05rem",
          fontSize:"0.08rem"
        },500)
      });
      $(".input").blur(function () {
        if($(this).val()==""){
          $(this).prev().animate({
            top:"0.18rem",
            fontSize:"0.14rem"
          },500)
        }
      });
    },
    methods:{
      click:function () {
        this.$router.push({path:"/register"})
      },
      login:function () {
        var arr1=["请输入手机号","请输入密码"];
        var inputValue=document.getElementsByClassName("input");
        for(let i=0;i<inputValue.length;i++) {
          if (inputValue[i].value == "") {
            $("#information").css({
              display: "block"
            });
            $("#information").html(arr1[i])
            setTimeout(function () {
              $("#information").css({
                display: "none"
              });
            }, 1500)
            return;
          }
        }
        //手机号验证
        var phoneStr = $("#phone")[0].value;
        var reg = /^1\d{10}$/;
        if (reg.test(phoneStr)) {
          $("#information").css("display","none");
        }
        else {
          $("#information").css("display","block");
          $("#information").html("手机号码格式错误");
          setTimeout(function () {
            $("#information").css({
              display: "none"
            });
          }, 1500)
          return;
        }
        //密码验证
        var passwordStr=$("#password")[0].value;
        var reg=/^[\w\W]{6,}$/;
        if(reg.test(passwordStr)){
          $("#information").css("display","none");
        }
        else{
          $("#information").css("display","block");
          $("#information").html("密码长度不足六位");
          setTimeout(function () {
            $("#information").css({
              display: "none"
            });
          }, 1500)
          return;
        }
        if($("#information").css("display")=="none"){
          var that = this;
          var username=$("#phone").val();
          var password=$("#password").val();
          fetch('http://localhost:3000/loginCheck/login', {
            method: 'post',
            headers: {
              "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
            },
            body: `username=${username}&password=${password}`
          })
            .then(function (data) {
              data.json().then(function (data) {
                if(data.checked==1){
//                  console.log(that.addCookie)
                  that.addCookie("username",username,1);
                  that.$router.push("/my?username="+username)
//              this.$router.push({path:'/my'});
                }else{
                  $("#information").css("display","block");
                  $("#information").html("用户名或密码错误");
                  setTimeout(function () {
                    $("#information").css({
                      display: "none"
                    });
                  }, 1500)
                }
              })
            })
            .catch(function (error) {
              console.log('Request failed', error);
            });
        }
      },
    }
  }
</script>
<style scoped>
  .information{
    position: absolute;
    background-color: rgba(128,128,128,0.7);
    color: white;
    font-size: 0.16rem;
    padding: 0.1rem 0.10rem;
    border-radius: 10px;
    display: none;
  }
  .content{
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    background-color: white;
    padding: 0.35rem 0.55rem;
    box-sizing: border-box;
  }
  .textbox{
    width: 100%;
    height: 0.7rem;
    position: relative;
    margin-bottom: 0.2rem;
  //display: flex;
  }
  .textbox input{
    font-size: 0.18rem;
  }
  .textbox p{
    font-size: 0.14rem;
    color: #A1A1A1;
    position: absolute;
    top: 0.18rem;
  }
  .textbox .mess{
    font-size: 0.14rem;
    color: red;
    position: absolute;
    white-space: nowrap;
    top: 0.7rem;
    left: 0rem;
    display: none;
  }
  .textbox input{
    width: 100%;
    height: 80%;
    border-top:none ;
    border-left: none;
    border-right:none;
    border-bottom: 1px solid #AAAAAA;
    outline:none;
    float: left;
  }
  .message span{
    font-size: 0.1rem;
    position: absolute;
    color: #E8065B;
    right: 0rem;
    top: 0.15rem;
  }
  .btn-login{
    width: 100%;
    height: 0.45rem;
    margin-top: 0.35rem;
    background-color: #E8065B;
    text-align: center;
    line-height: 0.45rem;
    color: #ffffff;
    font-size: 0.18rem;
    border: none;
    box-shadow: 0px 2px 3px #CECECE;
  }
  .register{
    font-size: 0.12rem;
    color: #A1A1A1;
    margin-top: 0.2rem;
  }
  .rapidtext{
    font-size: 0.1rem;
    color: #A1A1A1;
    width: 0.8rem;
    background-color: white;
    text-align: center;
    margin: 1rem auto 0;
    position: relative;

  }
  .rapidtext:after{
    position: absolute;
    content: "";
    border-top: 1px solid #A1A1A1;
    width: 100%;
    top: 0.08rem;
    right: -0.9rem;
  }
  .rapidtext:before{
    position: absolute;
    content: "";
    border-top: 1px solid #A1A1A1;
    width: 100%;
    top: 0.08rem;
    right: 0.9rem;
  }
  .rapid{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    margin-top: 0.2rem;
  }
  .rapid li{
    display: flex;
    flex-direction: column;
    font-size: 0.08rem;
    justify-content: center;
    align-items: center;
    color: #303236;
  }
  .rapid li .iconfont{
    font-size: 0.32rem;
    margin-bottom: 0.08rem;
  }
  .rapid li .icon-weixin{
    color: #64B58C;
  }
  .rapid li .icon-icon_qq{
    color: #7AB8CC;
  }
  .rapid li .icon-sina{
    color: #CC7A7A;
  }
</style>
